// @import "~view-design/src/styles/index.less";

html {
  font-size: 16px;
}
html,
body {
  padding: 0;
  height: 100%;
}

.introjs-button {
  padding: 10px 20px !important;

  &:focus {
    // box-shadow: 0 0 0 4px rgb(158, 158, 158, 0.5) !important;
    box-shadow: none !important;
    border: none !important;
  }
}
.ms-font {
  font-size: 30px !important;
}
.sm-font {
  font-size: 26px !important;
}
.esm-font {
  font-size: 18px !important;
}
.introjs-skipbutton {
  font-size: 0 !important;

  &:hover {
    color: transparent !important;
  }
}

.introjs-helperLayer {
  box-shadow: 0px 0px 1px 2px fade(#000, 65%),
    0px 0px 0px 5000px fade(#000, 65%) !important;
}



/* 这里改iview的变量 */
@primary-color: #2046db;
@info-color: #39debe;
@error-color: #f65164;
@warning-color: #ffa63f;
/* end */

/* 白色主题 */
@whiteColor: #fff;
@cccColor: #cccccc;
@color999: #999999;
@color666: #666666;
@color333: #333333;

@Body_Text_light: #fff; //-csq
@Label_Text_light: #131325;
@Background_light: #f6f7fb;
@Background_Card_light: #ffffff;
@Line_Color_light: #e4e4f4;
@systemTextColor: #1f1f43;

/* 紫色主题 */
@Placeholder_Color_purple: #515a6e;
@Label_Text_purple: #fff; //--csq
@Body_Text_purple: #f6f7fb;
@Background_purple: #212121; //-csq
@Background_Card_purple: #212121; //-csq
@Line_Color_purple: #212121; //-csq
@Line3_Color_purple: #393939;
.ivu-select-dropdown {
  background-color: black !important;
  max-height: none !important;
  .ivu-dropdown-menu {
    // font-weight: bold !important;
    .ivu-dropdown-item {
      color: #fff;
    }
    .ivu-dropdown-item:hover {
      background-color: #2046db !important;
    }
  }
}
.ivu-select-dropdown-transfer {
  // 2022-11-04-下拉框选中样式
  .ivu-select-item {
    &:hover {
      color: #2046db !important;
    }
  }
}
.content_maxWidth {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}

.set_tab_light {
  .ivu-tabs {
    background: @Background_light;
    color: @Body_Text_light;
    .BorderRadius10();

    .ivu-tabs-bar {
      border-color: @Line_Color_light;
      background: #fff;
    }

    .ivu-tabs-nav {
      .ivu-tabs-tab {
        padding: 12px 6px;
        font-size: 16px;
      }

      .ivu-tabs-tab-active {
        .fontBold();
        font-size: 20px;
      }

      .ivu-tabs-tab:hover {
        color: @primary-color;
      }
    }
  }
}

.set_card_light {
  .ivu-card {
    background: @Background_Card_light;
    border: none;
    color: @Body_Text_light;

    .BorderRadius10();

    .ivu-card-head {
      border-bottom: none;

      p {
        color: @Label_Text_light;
        .fontBold();
        font-size: 18px;
      }
    }

    .ivu-card-bordered {
      border-color: @Background_Card_light;
    }

    .card_tit {
      color: @Label_Text_light;
      .fontBold();
      font-size: 18px;
      margin-bottom: 10px;
    }
  }

  .ivu-card:hover {
    box-shadow: 0px 15px 35px rgba(215, 208, 232, 0.35);
  }
}

.set_btn_light {
  .ivu-btn-default {
    background-color: @Body_Text_light;
    border: 1px solid @Body_Text_light;
    color: @Background_Card_light;

    .ivu-icon {
      color: @primary-color;
    }
  }

  .ivu-btn-icon-only {
    .ivu-icon {
      color: @Background_Card_light;
    }
  }

  .ivu-btn-ghost {
    color: @primary-color;
    border: 1px solid @primary-color;
    background-color: rgba(0, 0, 0, 0);

    .ivu-icon {
      color: @primary-color;
    }
  }

  .ivu-btn-text {
    //color: @Body_Text_light;
    span {
      font-family: Roboto, "Avenir", Helvetica, Arial, sans-serif;
    }
  }
}
.ivu-table-cell {
  word-break: keep-all;
  padding-left: 8px;
  padding-right: 8px;
}
.set_table_light {
  .ivu-table {
    color: @Body_Text_light;

    th {
      background: @Line_Color_light;
      color: @Body_Text_light;
    }

    td {
      background: @Background_Card_light;
      border-bottom: 1px solid @Background_light;
    }
  }
}

.set_group_button_light {
  .ivu-radio-group-button {
    .ivu-radio-wrapper.ivu-radio-wrapper-checked {
      //background:@primary-color ;
      //color:@whiteColor;
      .fontBold();
    }

    .ivu-radio-wrapper {
      //background:@Background_Card_purple;
      //color:@whiteColor;
      //border: 1px solid @primary-color;
      font-family: Roboto, "Avenir", Helvetica, Arial, sans-serif;
    }

    .ivu-radio-wrapper:before,
    .ivu-radio-wrapper:after {
      //background:@primary-color;
    }
  }
}

.set_notification_light {
  .notification_div {
    background-color: @whiteColor;

    .notification_div_top {
      color: @Label_Text_light;
    }

    .notification_List {
      .ivu-card {
        background: @Background_light;
      }
    }

    .noti_title,
    .noti_content_text,
    .noti_content {
      color: @Label_Text_light;
    }

    .ivu-card {
      background: @Background_light;
      border: none;
      color: @Body_Text_light;
      .BorderRadius10();

      .ivu-card-head {
        border-bottom: none;

        p {
          color: @Label_Text_light;
          .fontBold();
          font-size: 18px;
        }
      }

      .card_tit {
        color: @Label_Text_light;
        .fontBold();
        font-size: 18px;
        margin-bottom: 10px;
      }
    }

    .ivu-tag:not(.ivu-tag-border):not(.ivu-tag-dot):not(.ivu-tag-checked) {
      color: @Label_Text_light !important;
      border-color: @Label_Text_light !important;

      .ivu-tag-text {
        color: @Label_Text_light !important;
      }
    }
  }
}

.set_select_light {
  .ivu-select-item {
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;

    &.ivu-select-item-disabled {
      opacity: 0.3;
    }
  }

  .ivu-select-group-title {
    color: @warning-color;
    line-height: 20px;
    height: auto;
    font-family: RobotoBold, "Avenir", Helvetica, Arial, sans-serif;
  }
}

.set_step_light {
  .ivu-steps {
    .ivu-steps-item.ivu-steps-status-process {
      cursor: pointer;

      &:hover {
        .ivu-steps-title {
          color: @Label_Text_light;
        }
      }

      .ivu-steps-title {
        background: @Background_light;
        padding: 3px;
        color: @Label_Text_light;
      }

      .ivu-steps-content {
        color: @Label_Text_light;
      }

      .ivu-steps-head-inner {
        margin-right: 0;

        span {
          color: @Background_Card_light;
        }
      }
    }

    .ivu-steps-item.ivu-steps-status-wait,
    .ivu-steps-item.ivu-steps-status-finish {
      .ivu-steps-title {
        background: @Background_light;
        padding: 3px;
        color: @Label_Text_purple;
      }

      .ivu-steps-content {
        color: @Label_Text_purple;
      }

      .ivu-steps-head-inner {
        border: 1px solid @primary-color;
        margin-right: 0;
        background: @Background_light;

        span {
          color: @primary-color;
        }
      }
    }

    .ivu-steps-head {
      background: transparent;
    }
  }
}

/***** 自定义的样式 *****/
.SELF_defined_style_light {
  //自定义的tab样式
  .self_defined_tab {
    border-radius: 20px;
    background: @Background_light;
    display: inline-block;

    span {
      border-radius: 20px;
      display: inline-block;
      padding: 0 16px;
      height: 29px;
      line-height: 29px;
      color: @Label_Text_light;
      cursor: pointer;

      &.active {
        background: @primary-color;
        color: @whiteColor;
      }

      &.disabled {
        cursor: not-allowed;
        color: rgba(117, 119, 154, 0.51) !important;
      }
    }
  }

  .welcome_text,
  .message_project_value,
  .app_title,
  .app_right > .tit,
  .message_box .message_top span,
  .message_tabs .message_tab span,
  .message_content .message_list .info,
  .message_weather .val,
  .card_component .card_title,
  .levelComp_title_text,
  .photos_card_div .photos_title,
  .remark_title {
    color: @Label_Text_light;
  }

  .app_icon {
    color: @Label_Text_light;
    background: @Label_Text_purple;
  }

  .app_store_box {
    background-color: @Background_Card_light;
  }

  .apps_icon_list .apps_icon span {
    color: @Label_Text_light;
  }

  .message_weather {
    .weather_icon {
      color: @Label_Text_light;
      background: @Background_light;
    }
  }

  .default_img {
    .img {
      color: @whiteColor;
      background: @Body_Text_purple;
    }
  }

  .addProjectUsers {
    .showUserCheckList {
      background-color: @Background_Card_light;

      .closeIcon {
        color: @Body_Text_light;

        &:hover {
          color: @Body_Text_purple;
        }
      }
    }

    .ivu-list-item {
      &:hover {
        background: @Background_Card_light;
      }

      a {
        color: @Body_Text_light;

        &:hover {
          color: @Body_Text_purple;
        }
      }
    }
  }

  .form_component {
    background: @Background_Card_light;
  }

  .reportTaskCard {
    background-color: @Background_light;

    .reportTaskCard_title {
      .fontBold();
      color: @Label_Text_light;
    }

    .reportTaskCard_rootCause {
      color: @primary-color;
    }

    .reportTaskCard_remark {
      color: @Body_Text_light;
    }
  }

  .timeline_component {
    color: @primary-color;
    background: @Background_Card_light;

    //.time_name{
    //  color: @Background_light;
    //}
    //.role_select_all{
    //  color: @Background_light;
    //}
    .card_img {
      background: @Background_light;
    }

    .show_shadow {
      background: rgba(255, 255, 255, 0.36);
    }
  }

  .editPhoto {
    .img-card,
    .selectedTag {
      border: 1px solid @Line_Color_light;
    }

    .photo_tag_time,
    .selectedTag > p {
      color: @Label_Text_light;
    }
  }

  .purple_color_span,
  .gray_color_span {
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 30px;
    margin-top: 10px;
  }

  .purple_color_span {
    background: #7033ff;
  }

  .gray_color_span {
    background: #999;
  }

  .log_div {
    background-color: @Background_Card_light;
  }
}

.SET_SCROLLBAR_light {
  /* 更改滚动条默认样式start */
  ::-webkit-scrollbar {
    width: 6px;
    height: 8px;
    // background-color:#49566f;
    background: fade(@primary-color, 50%);
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2.5px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 2.5px rgba(255, 255, 255, 0.3);
    border-radius: 2.5px;
    background-color: @Background_Card_light;
  }

  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 2.5px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 2.5px rgba(255, 255, 255, 0.3);
    border-radius: 2.5px;
    // background: rgba(81, 81, 81, 0.7);
    background: fade(@Body_Text_light, 50%);
    opacity: 0.9;
    transition: opacity ease-in-out 200ms;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: fade(@primary-color, 50%);
    opacity: 0.5;
  }

  /* 更改滚动条默认样式end */
}

// 白色主题
.light_color {
  .card_slot_title {
    color: @systemTextColor;
  }

  .ivu-layout-header {
    background: @Body_Text_light;
  }

  .ivu-layout-sider {
    background: @Background_light;

    .ivu-menu-vertical.ivu-menu-light {
      &:after {
        background: none;
      }
    }
  }

  .ivu-form .ivu-form-item-label,
  .ivu-menu,
  .ivu-tabs {
    color: @systemTextColor;
  }

  /*面包屑样式*/
  .ivu-breadcrumb {
    color: @Body_Text_light;
    font-size: 22px;
  }

  .ivu-breadcrumb-item-separator {
    color: @Body_Text_light;
  }

  .ivu-breadcrumb > span:last-child {
    color: @primary-color;
    font-size: 22px;
  }

  /* 2021-06-16-步骤UI */
  .ivu-steps {
    .ivu-steps-item {
      cursor: pointer;

      &:hover {
        .ivu-steps-title {
          color: @color333;
        }
      }
    }
  }

  /* 步骤UI end */
  .ivu-menu-light {
    background: @Background_light;
    border-radius: 10px;

    &:after {
      background: none;
    }
  }

  .header_top_right {
    color: @Background_light;

    a {
      color: @Background_light;
    }
  }

  .report_border {
    border: 1px solid @Line_Color_light;
  }

  .main_layout {
    .layout_content {
      background: @Background_light;

      .layout_content_bg {
        background: @Background_light;
        // .paddingLayoutContent();
      }
    }

    .bread_crumb_div {
      background: @Background_light;
      .paddingBreadCrumb();
    }
  }

  .ivu-avatar {
    background: @Line_Color_light;
  }

  .SET_SCROLLBAR_light();
  .set_tab_light();
  .set_card_light();
  .set_table_light();
  .set_group_button_light();
  .set_table_style();
  .set_btn_light();
  .set_notification_light();
  .set_select_light();
  .set_step_light();
  .SELF_defined_style_light();

  /* 弹框样式start */
  & ~ .v-transfer-dom {
    .set_card_light();
    .set_table_light();
    .set_tab_light();
    .set_group_button_light();
    .set_table_style();
    .set_notification_light();
    .SET_SCROLLBAR_light();
    .SELF_defined_style_light();
    .set_select_light();
    .set_step_light();
    .set_btn_light();

    .reportTaskCard {
      background-color: #fff !important;
    }

    .ivu-modal-content {
      background: @Background_light;
      color: @Label_Text_light;

      .ivu-modal-header-inner {
        color: @Label_Text_light;
        font-size: 16px;
        .fontBold();
      }

      .ivu-modal-header,
      .ivu-modal-footer {
        border-color: @Background_light;
      }

      .ivu-modal-header {
        border-bottom: none;
      }

      .ivu-modal-body {
        padding-bottom: 25px;
      }
    }
  }

  /* 弹框样式end */
  .message_box .message_weather .report_item {
    .ivu-col,
    div {
      color: @Body_Text_light;
    }
  }

  .message_box .report_item .sub-title {
    span {
      color: @Body_Text_light;
    }
  }
}

/*预设的样式Start*/
.BorderRadius10 {
  border-radius: 10px;
}

.paddingLayoutContent {
  padding: 16px;
}

.paddingBreadCrumb {
  padding: 10px 38px 0;
}

.fontBold {
  font-family: RobotoBold, "Avenir", Helvetica, Arial, sans-serif;
}

/*设置按钮组*/
.reset-group-button {
  .ivu-radio-group-button {
    .ivu-radio-wrapper.ivu-radio-wrapper-checked {
      background: @primary-color;
      color: @whiteColor;
      .fontBold();
    }

    .ivu-radio-wrapper {
      background: @Background_Card_purple;
      color: @whiteColor;
      border: 1px solid @primary-color;
      font-family: Roboto, "Avenir", Helvetica, Arial, sans-serif;
    }

    .ivu-radio-wrapper:before,
    .ivu-radio-wrapper:after {
      background: @primary-color;
    }
  }
}

/*设置notification*/
.set_notification_purple {
  .notification_div {
    background-color: @Background_Card_purple;

    .notification_div_top {
      color: @whiteColor;
    }

    .notification_List {
      .ivu-card {
        background: @Line_Color_purple;
      }
    }

    .noti_title,
    .noti_content_text,
    .noti_content {
      color: @Body_Text_purple;
    }

    .ivu-card {
      background: @Background_Card_purple;
      border: none;
      color: @Body_Text_light;
      .BorderRadius10();

      .ivu-card-head {
        border-bottom: none;

        p {
          color: @whiteColor;
          .fontBold();
          font-size: 18px;
        }
      }

      .card_tit {
        color: @whiteColor;
        .fontBold();
        font-size: 18px;
        margin-bottom: 10px;
      }
    }

    .ivu-tag:not(.ivu-tag-border):not(.ivu-tag-dot):not(.ivu-tag-checked) {
      color: @Body_Text_light !important;
      border-color: @Body_Text_light !important;

      .ivu-tag-text {
        color: @Body_Text_light !important;
      }
    }
  }
}

/********* 设置Card **************/
.set_card_purple {
  .ivu-card {
    background: @Background_Card_purple;
    border: none;
    color: @Body_Text_light;
    .BorderRadius10();

    .ivu-card-head {
      border-bottom: none;

      p {
        color: @whiteColor;
        .fontBold();
        font-size: 18px;
      }
    }

    .ivu-card-bordered {
      border-color: @Background_Card_purple;
    }

    .card_tit {
      color: @whiteColor;
      .fontBold();
      font-size: 18px;
      margin-bottom: 10px;
    }
  }
}

/************ 设置Btn **************/
.set_btn_purple {
  .ivu-btn-default {
    background-color: #212121;
    border: 1px solid #2e2e2e;
    color: @Background_light;

    .ivu-icon {
      color: @Background_light;
    }

    span {
      color: @Background_light;
    }
  }

  .ivu-btn-icon-only {
    .ivu-icon {
      color: @Background_light;
    }
  }

  .ivu-btn-ghost {
    color: @Label_Text_purple;
    border: 1px solid @Label_Text_purple;
    background-color: rgba(0, 0, 0, 0);
  }

  .ivu-btn-text {
    color: @Body_Text_light;

    &:hover {
      background-color: @Background_purple;
      color: @primary-color;
    }

    span {
      font-family: Roboto, "Avenir", Helvetica, Arial, sans-serif;
    }
  }
}

.set_table_purple {
  .ivu-table {
    color: @Background_light;

    th {
      // background: @Line_Color_purple;
      background: #2b2b2b;
      color: @Label_Text_purple;
    }

    td {
      // background: @Background_Card_purple;
      background: rgba(43, 43, 43, 0.75);
      border-bottom: 1px solid @Line_Color_purple;
    }
  }
}

/************ 设置page **************/
.set_page_purple {
  .ivu-page {
    .ivu-page-prev,
    .ivu-page-next,
    .ivu-page-item {
      background: @Label_Text_purple;

      &.ivu-page-disabled {
        background: @Line_Color_purple;
      }

      a {
        color: @whiteColor;
      }
    }

    li {
      // background: @Body_Text_purple;
      // border-color: @Line3_Color_purple;

      &.ivu-page-item-active {
        background: @primary-color;

        a {
          color: @whiteColor;
        }
      }
    }
  }
}

/************ 设置list**************/
.set_list_purple {
  .ivu-list-split {
    .ivu-list-item {
      border-bottom: 1px solid @Line3_Color_purple;
    }
  }
}

/************ 设置tab**************/
.set_tab_purple {
  .ivu-tabs {
    // background: @Background_Card_purple;
    color: @Body_Text_light;
    .BorderRadius10();

    .ivu-tabs-bar {
      border-color: @Line_Color_purple;
    }

    .ivu-tabs-nav {
      .ivu-tabs-tab {
        padding: 12px 6px;
        font-size: 16px;
      }

      .ivu-tabs-tab-active {
        .fontBold();
        font-size: 20px;
      }

      .ivu-tabs-tab:hover {
        color: @cccColor;
      }
    }
  }
}

.set_select_purple {
  .ivu-input,
  .ivu-select .ivu-select-selection {
    background: @Background_purple;
    border-color: @Line3_Color_purple;
    color: @whiteColor;
  }

  .ivu-select-dropdown {
    background: @Line_Color_purple;
  }

  .ivu-select-item {
    color: @cccColor;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;

    &:hover {
      color: @Line3_Color_purple;
      background: @whiteColor;
    }

    &.ivu-select-item-selected {
      color: #fff !important;
      background: #2046db !important;
      font-weight: bold;
    }

    &.ivu-select-item-disabled {
      opacity: 0.3;
    }
  }

  .ivu-select-group-title {
    color: @warning-color;
    line-height: 20px;
    height: auto;
    font-family: RobotoBold, "Avenir", Helvetica, Arial, sans-serif;
  }

  .ivu-select-multiple {
    .ivu-tag.ivu-tag-checked {
      border: 1px solid @Label_Text_purple;
      background-color: @Label_Text_purple;

      .ivu-tag-text {
        color: @Body_Text_purple;
      }
    }
  }
}

.set_poptip_purple {
  .ivu-poptip {
    .ivu-poptip-inner {
      background-color: @Background_purple;
    }

    .ivu-poptip-popper[x-placement^="bottom"] .ivu-poptip-arrow:after {
      border-bottom-color: @Background_purple;
    }

    .ivu-poptip-popper[x-placement^="bottom"] .ivu-poptip-arrow {
      border-bottom-color: @Background_purple;
    }
  }
}

.set_step_purple {
  .ivu-steps {
    .ivu-steps-item.ivu-steps-status-process {
      cursor: pointer;

      &:hover {
        .ivu-steps-title {
          color: @Body_Text_purple;
        }
      }

      .ivu-steps-title {
        background: @Background_purple;
        padding: 3px;
        color: @Body_Text_purple;
      }

      .ivu-steps-content {
        color: @Body_Text_purple;
      }

      .ivu-steps-head-inner {
        margin-right: 0;

        span {
          color: @Body_Text_purple;
        }
      }
    }

    .ivu-steps-item.ivu-steps-status-wait,
    .ivu-steps-item.ivu-steps-status-finish {
      .ivu-steps-title {
        background: @Background_purple;
        padding: 3px;
        color: @Label_Text_purple;
      }

      .ivu-steps-content {
        color: @Label_Text_purple;
      }

      .ivu-steps-head-inner {
        border: 1px solid @primary-color;
        margin-right: 0;
        background: @Background_purple;

        span {
          color: @primary-color;
        }
      }
    }

    .ivu-steps-head {
      background: transparent;
    }
  }
}

//自定义
.SELF_defined_style {
  //自定义的tab样式
  .self_defined_tab {
    border-radius: 20px;
    background: #0f0f29;
    display: inline-block;

    span {
      border-radius: 20px;
      display: inline-block;
      padding: 0 16px;
      height: 29px;
      line-height: 29px;
      color: #fff;
      cursor: pointer;

      &.active {
        background: #7033ff;
        color: #fff;
      }

      &.disabled {
        cursor: not-allowed;
        color: rgba(117, 119, 154, 0.51) !important;
      }
    }
  }

  //工单里的样式
  .taskList {
    .ivu-tabs {
      background: @Background_purple;
    }
  }

  .task_list_div {
    .task_content,
    .task_footer {
      color: @whiteColor;
    }
  }

  //report
  .report_task {
    background: @Background_Card_purple;

    .ivu-card {
      background-color: @Line3_Color_purple;
    }

    .report_card {
      border: 1px solid #75779a;
    }

    .add_info_div {
      &.ivu-card {
        background: @Line3_Color_purple;
      }

      .task_title {
        color: @Background_light;

        .task_info {
          color: #75779a;
        }
      }
    }
  }

  .report_info {
    .report_name {
      color: @Background_light;
    }

    p {
      color: #636e95;
    }
  }

  .canvas_type {
    background-color: @Background_purple;
  }

  .welcome_text,
  .message_project_value,
  .app_title,
  .app_right > .tit,
  .message_box .message_top span,
  .message_tabs .message_tab span,
  .message_content .message_list .info,
  .message_weather .val,
  .card_component .card_title,
  .levelComp_title_text,
  .photos_card_div .photos_title,
  .remark_title {
    color: @whiteColor;
  }

  .app_icon {
    color: @whiteColor;
    background: @Label_Text_purple;
  }

  .app_store_box {
    background: @Line_Color_purple;
  }

  .apps_icon_list .apps_icon span {
    color: @Body_Text_purple;
  }

  .message_weather {
    .weather_icon {
      color: @whiteColor;
      background: @Line_Color_purple;
    }
  }

  .default_img {
    .img {
      color: @Background_Card_purple;
      background: @Line_Color_purple;
    }
  }

  .addProjectUsers {
    .showUserCheckList {
      background-color: @Background_purple;

      .closeIcon {
        color: @Placeholder_Color_purple;

        &:hover {
          color: #444;
        }
      }
    }

    .ivu-list-item {
      &:hover {
        background: @Line_Color_purple;
      }

      a {
        color: @Placeholder_Color_purple;

        &:hover {
          color: #444;
        }
      }
    }
  }

  .form_component {
    background: @Background_Card_purple;
  }

  .reportTaskCard {
    background-color: @Line3_Color_purple;
    color: @Label_Text_purple;

    .reportTaskCard_title {
      .fontBold();
      color: @Body_Text_purple;
    }

    .reportTaskCard_rootCause {
      color: @primary-color;
    }

    .reportTaskCard_remark {
      color: @Body_Text_purple;
    }
  }

  .timeline_component {
    color: @primary-color;
    background: #141437;

    .time_name {
      color: @Background_light;
    }

    .role_select_all {
      color: @Background_light;
    }

    .card_img {
      background: @Line_Color_purple;
    }

    .show_shadow {
      background: rgba(20, 20, 55, 0.55);
    }
  }

  .editPhoto {
    .img-card,
    .selectedTag {
      border: 1px solid @Line_Color_purple;
    }

    .photo_tag_time,
    .selectedTag > p {
      color: @Label_Text_purple;
    }
  }

  .purple_color_span,
  .gray_color_span {
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 30px;
    margin-top: 10px;
  }

  .purple_color_span {
    background: #7033ff;
  }

  .gray_color_span {
    background: #999;
  }

  .log_div {
    background-color: @Background_Card_purple;
  }
}

.SET_SCROLLBAR_purple {
  /* 更改滚动条默认样式start */
  ::-webkit-scrollbar {
    width: 6px;
    height: 8px;
    // background-color:#49566f;
    background: fade(@primary-color, 0%);
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
    border-radius: 2.5px;
    background-color: rgba(0, 0, 0, 0);
  }

  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
    border-radius: 2.5px;
    background: #282c3a;
    // background: fade(@Line_Color_purple, 90%);
    opacity: 0.9;
    transition: opacity ease-in-out 200ms;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: fade(@primary-color, 50%);
    opacity: 0.5;
  }

  /* 更改滚动条默认样式end */
}

/*预设的样式End*/

/*table样式修改*/
.set_table_style {
  .ivu-table {
    background: none;

    &::before,
    &::after {
      background: none;
    }

    th {
      border-right: none;
      border-bottom: none;
      font-family: RobotoBold, "Avenir", Helvetica, Arial, sans-serif;
      // text-transform: uppercase;
      font-size: 14px;
      padding: 16px 0;
    }

    td {
      border-right: none;
      font-weight: 100;
      padding: 20px 0;
      // cursor: pointer;
    }
    &.ivu-table-small {
      td {
        padding: 12px 0;
      }
    }
  }

  .ivu-table-wrapper-with-border {
    border: none;
    .BorderRadius10();
  }
}

.ivu-message {
  color: #000000;
}

// 紫色主题
.dark_color {
  overflow: hidden;

  input::placeholder {
    color: #999 !important;
  }

  ::placeholder,
  .ivu-select-placeholder {
    color: @Placeholder_Color_purple !important;
  }

  // 20210914  tabs 样式
  .taskList {
    .ivu-tabs-bar {
      border-color: @Background_Card_purple !important;
    }
  }

  .ivu-menu {
    color: @Body_Text_purple;
  }

  .ivu-form .ivu-form-item-label {
    color: @Label_Text_purple;
    font-size: 16px;
  }

  .ivu-layout {
    background: @Background_purple;
  }

  /*面包屑样式*/
  .ivu-breadcrumb {
    color: @Body_Text_purple;
    font-size: 22px;
    /* 先.写着*/
  }

  .ivu-breadcrumb-item-separator {
    color: @Body_Text_purple;
  }

  .ivu-breadcrumb > span:last-child {
    color: @Background_light;
    font-size: 22px;
    /* 先.写着*/
  }

  /* 菜单hover*/
  .ivu-menu-vertical .ivu-menu-item:hover,
  .ivu-menu-vertical .ivu-menu-submenu-title:hover {
    color: @Background_light;
  }

  //Tree
  .ivu-checkbox-checked {
    .ivu-checkbox-inner {
      border: 1px solid @primary-color;
      background-color: @primary-color;
    }
  }

  .ivu-checkbox-inner {
    border: 1px solid @Body_Text_purple;
    background-color: @Background_purple;
  }

  /*timeline*/
  .ivu-timeline-item-head {
    background-color: @primary-color;
    width: 20px;
    height: 20px;
    border: 10px solid;
  }

  .ivu-timeline-item-tail {
    border-left: 1px solid @primary-color;
    left: 9px;
  }

  .ivu-scroll-container {
    overflow-x: hidden;
  }

  & ~ .ivu-notice {
    .ivu-notice-notice {
      background: @Line_Color_purple !important;
      margin-bottom: 8px !important; // 修改消息通知样式
      padding: 12px 0 0 !important;
      .ivu-notice-desc {
        color: @Background_light;
      }
      .ivu-notice-notice-close {
        top: 13px !important;
      }
      .ivu-notice-title {
        span {
          display: inline-block;
          width: 93%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-left: 12px;
        }
      }
    }

    .ivu-notice-with-warning {
      .ivu-notice-title {
        color: @warning-color;
      }
    }

    .ivu-notice-with-info {
      .ivu-notice-title {
        color: @primary-color;
      }
    }

    .ivu-notice-with-error {
      .ivu-notice-title {
        color: @error-color;
      }
    }
  }

  & ~ .ivu-select-dropdown-transfer {
    // 2022-08-08-下拉框选中样式
    .ivu-select-item {
      &:hover {
        color: #fff !important;
      }
    }
  }

  /* 弹框样式start */
  & ~ .v-transfer-dom {
    .ivu-input,
    .ivu-select .ivu-select-selection {
      background: transparent !important;
      border: 1px solid #5c5c5c !important;
    }

    .ivu-input::placeholder,
    .ivu-select-placeholder {
      // color: @Placeholder_Color_purple;
      color: #5c5c5c !important;
    }

    .ivu-date-picker-cells-cell-prev-month,
    .ivu-date-picker-cells-cell-next-month {
      em {
        color: @color666;
      }

      &:hover {
        em {
          color: @color999 !important;
        }
      }
    }

    .ivu-date-picker-cells-cell:hover {
      em {
        color: @color333;
      }
    }

    .ivu-form .ivu-form-item-label,
    .ivu-menu {
      color: @Body_Text_light;
    }
    &.show_drawer {
      .ivu-drawer-content {
        background: #212121;
      }
      .ivu-drawer-body {
        padding: 0;
        overflow: hidden;
      }
    }
    .ivu-drawer-content {
      background: rgba(17, 17, 17, 0.42);
      color: @Body_Text_light;

      .ivu-drawer-header {
        border-bottom: 1px solid @Background_purple;

        .ivu-drawer-header-inner {
          color: @Body_Text_light;
        }
      }

      .ivu-divider {
        color: @Body_Text_light;
      }

      .ivu-divider-horizontal.ivu-divider-with-text-center:before,
      .ivu-divider-horizontal.ivu-divider-with-text-left:before,
      .ivu-divider-horizontal.ivu-divider-with-text-right:before,
      .ivu-divider-horizontal.ivu-divider-with-text-center:after,
      .ivu-divider-horizontal.ivu-divider-with-text-left:after,
      .ivu-divider-horizontal.ivu-divider-with-text-right:after {
        border-top: 1px solid @Body_Text_light;
      }
    }

    .ivu-drawer-content {
      .ivu-divider {
        &::before,
        &::after {
          top: 0;
        }
      }
    }

    .ivu-modal-content {
      // background: @Background_purple;
      color: @Background_light;

      background: rgba(96, 96, 96, 0.1);
      -webkit-backdrop-filter: blur(69px);
      -moz-backdrop-filter: blur(69px);
      -ms-backdrop-filter: blur(69px);
      backdrop-filter: blur(69px);
      /* Note: backdrop-filter has minimal browser support */
      border-radius: 24px;
      border: 1px solid rgba(134, 163, 237, 0.3);

      // border-image: linear-gradient(108.99deg, #768FCF 1.13%, rgba(134, 163, 237, 0.15) 33.66%, rgba(134, 163, 237, 0.17) 58.95%, rgba(134, 163, 237, 0.64) 98.84%) 30 30;

      .ivu-modal-header-inner {
        color: #fff;
        font-size: 16px;
        .fontBold();
      }

      .ivu-modal-header,
      .ivu-modal-footer {
        border-color: @Line_Color_purple;
      }

      .ivu-modal-header {
        border-bottom: none;
        background: rgba(96, 96, 96, 0.083);
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12),
          inset 34.9px -34.9px 34.9px rgba(25, 25, 25, 0.083),
          inset -34.9px 34.9px 34.9px rgba(255, 255, 255, 0.083);
        backdrop-filter: blur(71.196px);
        /* Note: backdrop-filter has minimal browser support */
        border-radius: 23px 24px 0px 0px;
        border: none;
        padding-left: 30px;
        line-height: 30px;
      }

      .ivu-modal-close {
        .ivu-icon-ios-close {
          &:hover {
            color: #fff;
          }
        }
      }
    }

    .ivu-spin-fix {
      background: rgba(14, 25, 49, 0.8);
      border: none;
      color: #2046db;
    }

    //Tree
    .ivu-checkbox-checked {
      .ivu-checkbox-inner {
        border: 1px solid @primary-color;
        background-color: @primary-color;
      }
    }

    .ivu-checkbox-inner {
      border: 1px solid @Body_Text_purple;
      background-color: @Background_purple;
    }

    .ivu-tree-title {
      color: @Body_Text_purple;
    }

    /* notification end*/

    .ivu-radio-inner {
      // background-color: @Background_Card_purple;
      // border: 1px solid @Line3_Color_purple;
      border: 1px solid @Body_Text_purple;
    }

    .SET_SCROLLBAR_purple();

    .set_page_purple(); //設置頁碼樣式
    .set_btn_purple();
    /* 按钮样式 */
    .set_table_purple();
    .set_table_style();
    .set_tab_purple();
    .set_select_purple();

    .reset-group-button();
    .set_notification_purple();
    .set_card_purple();
    .set_list_purple();
    .set_poptip_purple();
    .set_step_purple();
    .SELF_defined_style();
  }

  /* 弹框样式end */

  .SET_SCROLLBAR_purple();
  .set_btn_purple();
  .set_tab_purple();
  .set_table_purple();
  .set_table_style();
  .reset-group-button();
  .set_notification_purple();
  .set_card_purple();
  .set_list_purple();
  .set_poptip_purple();
  .set_step_purple();
  .SELF_defined_style();
  .set_select_purple();
  .ivu-input-word-count {
    background-color: rgba(0, 0, 0, 0);
  }

  .ivu-layout-header {
    background: @Background_purple;
  }

  .ivu-layout-sider {
    background: @Background_Card_purple;
  }

  .ivu-menu-vertical.ivu-menu-light {
    &:after {
      background: none;
    }
  }

  .ivu-menu-light {
    // background: @Background_purple;
    background: none;

    &:after {
      background: none;
    }
  }

  .ivu-spin-fix {
    background: rgba(14, 25, 49, 0.8);
    border: none;
    color: #2046db;
  }

  .ivu-input,
  .ivu-select .ivu-select-selection {
    background: @Background_purple;
    // background: transparent;
    border-color: @Line3_Color_purple;
    color: @whiteColor;
  }

  .ivu-input[disabled] {
    background: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
  }

  .ivu-select-dropdown {
    background: @Line_Color_purple;
  }

  .ivu-input-group-prepend,
  .ivu-input-group-append {
    background: @Body_Text_purple;
    color: @whiteColor;
    border-color: @Background_Card_purple;
  }

  .main_layout {
    .layout_content {
      background: @Background_purple !important;

      .layout_content_bg {
        background: @Background_purple;
        // .paddingLayoutContent();
      }
    }

    .bread_crumb_div {
      background: @Background_purple;
      .paddingBreadCrumb();
    }
  }

  .table_page_component {
    .set_page_purple();
  }

  .card_tabs_component {
    //.ivu-tabs-bar {
    //  border-color: @Line_Color_purple;
    //}
    .component_btn_group {
      margin: 20px 0;

      .component_btn {
        margin-right: 10px;
      }
    }
  }

  .main_two_content {
    .main_two_left {
      background: @Background_Card_purple;
    }

    .main_two_right {
      // background: @Background_Card_purple;
    }

    .build_menu_block {
      .build_bg {
        background: @primary-color;
      }
    }
  }

  .report_border {
    border: 1px solid @Line3_Color_purple;
  }

  /*下拉框*/
  .ivu-dropdown-item {
    color: @Body_Text_light;
  }

  .ivu-dropdown-item:hover {
    background-color: @primary-color;
    color: @Background_light;
  }

  .task_details {
    .task_details_value {
      color: @Background_light;
    }
  }

  .daily_inspection {
    .daily_inspection_menu {
      background-color: @Background_Card_purple;
      .BorderRadius10();
    }

    .daily_inspection_content {
      width: 100%;
      margin-left: 16px;

      .daily_inspection_content_tree {
        background-color: @Background_Card_purple;
        .BorderRadius10();
        padding: 16px;
      }

      .daily_inspection_content_title {
        font-size: 16px;
        color: @warning-color;
        .fontBold();
      }
    }
  }
}

.iframe_div {
  width: 100%;
  height: 100vh;
  // height: 100%;
  max-height: 100%;
  overflow: auto;

  .iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
}

.login_box_div {
  position: fixed;
  width: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -70%);
}

.card_switch {
  &.ivu-switch-disabled {
    opacity: 1;
  }
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loading_div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // background: fade(@color333, 50%);
  background: rgba(31, 31, 67, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  .ivu-spin {
    color: @whiteColor;
  }
}

.form_component {
  padding: 16px;
  position: relative;
  .BorderRadius10();

  .ivu-form-item {
    margin-bottom: 12px;
  }
}

.card_component {
  .ivu-card {
    .BorderRadius10();
  }

  .card_footer {
    font-size: 12px;
    padding-top: 20px;
    position: relative;
    color: @Body_Text_light;
  }

  .card_btn {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.table_page_component {
  text-align: center;
  padding: 10px;
  //padding-bottom: 170px;
}

.card_tabs_component {
  position: relative;

  .tabs_btn_group_left {
    position: absolute;
    left: 0;
    top: -6px;
    z-index: 1;
  }

  .tabs_btn_group_right {
    position: absolute;
    right: 0;
    top: -6px;
    z-index: 1;
  }

  .tabs_div {
    .ivu-tabs-nav-scroll {
      .ivu-tabs-nav {
        float: none;
      }
    }
  }
}

.main_layout {
  height: 100vh;

  .ivu-layout {
    .ivu-layout-sider {
      min-width: 64px !important;
      flex: 0 0 64px !important;

      .ivu-menu {
        width: 64px !important;

        .ivu-menu-item {
        }
      }
    }
  }

  .layout_sider {
    height: 100vh;
  }

  .layout_logo {
    height: 64px;
    display: flex;
    align-items: center;
    margin-left: 70px;

    img {
      height: 45%;
      object-fit: contain;
      display: block;
    }
  }

  .layout_content {
    background: #fff;
    padding: 10px;
    // overflow: auto;
    height: calc(~"100vh - 85px");
  }

  .ivu-menu-item-active:not(.ivu-menu-submenu) {
    background: #2046db !important;
    border-radius: 4px !important;
    color: #fff !important;

    &::after {
      background: none !important;
    }
  }

  .ivu-menu-item {
    // margin: 0 auto;
  }

  .layout_menu {
    height: calc(~"100vh - 64px");
    overflow: auto;
  }

  .ivu-layout-header {
    position: relative;
    z-index: 1000;
  }
}

.header_top_right {
  color: @Label_Text_purple;

  a {
    color: @Label_Text_purple;
  }

  .settings_icon {
    margin-right: 10px;
    cursor: pointer;
  }
}

.rules_upload_input {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;

  & ~ .ivu-upload .ivu-upload-drag {
    background: transparent;
  }

  &:hover ~ .ivu-upload .ivu-upload-drag {
    border: 1px dashed #7033ff;
  }
}

.back_btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

.ivu-tag-border {
  height: auto !important;
  line-height: 16px !important;
  padding-top: 3px;
  padding-bottom: 3px;
  background: transparent !important;
}

.timeline_component {
  .BorderRadius10();
  margin-top: 20px;
  padding: 20px;

  .ivu-card {
    .ivu-card-body {
      padding: 0;
    }
  }

  .time_name {
    margin-left: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    font-family: RobotoBold, "Avenir", Helvetica, Arial, sans-serif;
  }

  .col_name {
    margin-bottom: 16px;
  }

  .card_img {
    position: relative;
    margin-top: 10px;
    .BorderRadius10();

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 10px 10px 0 0;
    }

    &:hover {
      .show_shadow {
        display: block;
      }
    }
  }

  .show_shadow {
    width: 100%;
    height: 100%;
    .BorderRadius10();
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    display: none;

    .ivu-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .card_tag {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    height: 40px;
    line-height: 35px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  }
}

.report_page {
  .card_left_menu {
    .BorderRadius10();
    position: absolute;
    left: 0;
    top: 0;
    width: 242px;
    z-index: 0;
  }

  .card_right_table {
    padding-left: 260px;
  }

  .report_info_div {
    margin-bottom: 10px;
  }

  .report_img_info {
    padding-left: 150px;
    padding-bottom: 16px;
    position: relative;

    .report_img {
      position: absolute;
      left: 0;
      top: 0;
      height: 160px;
      width: 130px;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .report_info {
      height: 160px;
      display: flex;
      flex-direction: column;

      .report_name {
        font-size: 22px;
        flex-grow: 1;
        .fontBold();
      }

      p {
        font-size: 16px;
        margin-bottom: 0;
        padding-top: 3px;
      }
    }
  }
}

.add_edit_report_page {
  .posi_left {
  }

  .posi_right {
    position: absolute;
    right: 16px;
    top: 16px;

    .ivu-btn {
      margin-left: 10px;
    }
  }

  .ivu-form-item {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.component_btn_group {
  margin: 20px 0;

  .component_btn {
    margin-right: 10px;
  }
}

.add_edit_content {
  .content_maxWidth();
}

.notification_padding_div {
  .notification_div {
    background-color: rgba(0, 0, 0, 0);

    .notification_List {
      .ivu-card {
        background-color: rgba(0, 0, 0, 0);
      }
    }
  }
}

.my_app_content {
  height: 100%;

  .my_app_list {
    padding: 16px;
    // padding-top: 62px;
    height: 100%;
    overflow: auto;

    .return_div {
      font-size: 16px;
      color: #fff;
      padding-bottom: 8px;

      span {
        padding-left: 10px;
      }

      // .ivu-btn-primary {
      //   background-color: #0D1D5C;
      //   border-color: #0D1D5C;
      // }
    }

    .my_app_height {
      height: calc(~"100vh - 119px");
      overflow-y: auto;
      overflow-x: auto;

      .my_app_ul {
        display: flex;
        flex-wrap: wrap;
        // height: calc(100vh - 119px);
        // height: 100%;
        width: 100%;

        .ivu-card {
          margin-bottom: 37px;
          width: 336px;
          height: 233px;
          margin-right: 37px;
          background: rgba(26, 26, 26, 0.48);
        }

        .ivu-card-extra {
          z-index: 2;

          .ivu-dropdown-rel {
            height: auto;
          }
        }
      }
    }

    .my_app_card {
      height: 194px;
      border-radius: 6px;
      cursor: pointer;

      &.disabled {
        cursor: not-allowed;

        &::before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(15, 15, 41, 0.75);
          z-index: 1;
        }
      }

      img {
        border-top-right-radius: 6px;
        // width: 100%;
        // height: 100%;
        object-fit: cover;
        border: none;
        width: 115px;
        height: 194px;
        float: right;
      }

      .shadow_bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(
          178.92deg,
          rgba(0, 0, 0, 0) 20.6%,
          rgba(0, 0, 0, 0.85) 113.97%
        );
        z-index: 0;
        border-radius: 6px;
      }

      .info_card {
        position: absolute;
        left: 25px;
        top: 15px;

        // padding: 10px;
        .info_card_title {
          display: inline-block;
          font-size: 16px;
          line-height: 23px;
          color: #fff;
          font-weight: 500;
          border-bottom: 2px solid;
          margin-bottom: 20px;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 180px;
          overflow: hidden;
        }

        .info_card_des {
          font-size: 12px;
          line-height: 15px;
          color: #fff;
          display: block;
          padding-top: 4px;
          width: 180px;
          margin-bottom: 15px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .info_card_btn {
          width: 92px;
          height: 35px;
          font-size: 12px;
          font-weight: 700;
          line-height: 30px;
          text-align: center;
          border: 3px solid;
          border-radius: 15px;
        }
      }

      .info_setting {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background: rgba(43, 43, 43, 0.6);

        .info_setting_icon {
          display: flex;
          margin-left: 20px;

          .info_set {
            text-align: center;
            padding-top: 2px;
            margin-right: 15px;

            .info_sec {
              font-size: 8px;
              line-height: 10px;
              color: #fff;
            }

            .ivu-select-dropdown {
              position: absolute;
              top: 30px !important;
              left: 80px !important;
            }
          }
        }
      }

      .info_circle {
        position: absolute;
        left: 2px;
        top: 1.5px;
        width: 12px;
        height: 230px;
        // background: rgb(204, 61, 85);
        border-radius: 8px;
        z-index: 99;
      }
    }
  }
  .pageContent {
    display: flex;
    justify-content: space-between;
    height: 100%;

    .my_app_list {
      flex: 1;
    }

    .right_menu {
      // padding-top: 48px;
      height: 100%;
    }
  }
}

.info_setting {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(43, 43, 43, 0.6);

  .info_setting_icon {
    display: flex;
    margin-left: 20px;

    .info_set {
      text-align: center;
      padding-top: 2px;
      margin-right: 15px;

      .info_sec {
        font-size: 8px;
        line-height: 10px;
        color: #fff;
      }

      .ivu-select-dropdown {
        position: absolute;
        top: 30px !important;
        left: 80px !important;
      }
    }
  }
}

#map {
  // width: 50%;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  // float: right;

  .mapboxgl-control-container {
    display: none !important;
  }
}

#mapboxId {
  width: 100%;
  height: 600px;
}

.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-geocoder--powered-by {
  display: none !important;
}

.mapboxgl-ctrl-zoom-in,
.mapboxgl-ctrl-zoom-out,
.mapboxgl-ctrl-compass {
  display: none !important;
}

//2022.05.31  message color
.ivu-message-custom-content.ivu-message-error {
  color: #131325;
}
.public_right_box .environment_four_block .four_li .botton_li {
  margin-top: 0 !important;
}
.card_setting_div {
  position: absolute;
  right: 16px;
  top: 16px;
  .setting_icon {
    color: #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
  }
}
.menu_options {
  margin: 20px;
  text-align: center;
  .ivu-btn-default {
    margin-right: 20px;
  }
}
.overflowClass {
  overflow: auto;
}
.iothub_iframe {
  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}
//  2022-09-28-消息UI
@noti_text_color: #b2d2fb;
@noti_gray_color: #999999;
@noti_content_color: #d9d9d9;
.notification_card {
  display: flex;
  margin-bottom: 16px;
  max-width: 770px;
  font-weight: bold;
  &.isSmall {
    margin-bottom: 0;
    .card_left {
      display: none;
    }
    .card_right {
      .from_div {
        // flex-direction: column;
        // align-items: start;
      }
      .card_tit {
        width: 268px;
        line-height: 20px;
        .card_ellipsis {
          width: calc(~"100% - 40px");
        }
      }
      label {
        font-size: 12px;
        color: #b3b3b3;
        // flex: none;
      }
    }
    .red_dot {
      width: 6px;
      height: 6px;
      left: -1px;
      top: 7px;
    }
    .notification_card_box {
      background: transparent;
      padding: 6px 12px;
      border-radius: 0;
      .notification_card_box_bg {
        border-radius: 0;
        background: transparent;
        border: none;
        border-bottom: 1px solid #727c87;
        padding: 6px;
        padding-bottom: 12px;
      }
      .type_name {
        border: none;
        color: #fff;
        padding: 0;
      }
    }
    .location_div {
      .more_time .more_time_icon {
        margin-right: 0;
      }
    }
  }
  .device_name {
    .device_icon {
      vertical-align: middle;
      margin-right: 6px;
      margin-bottom: 3px;
    }
  }
  .re_info_content {
    padding: 3px 0;
    .list_data {
      padding: 3px 0;
      color: @noti_content_color;
    }
  }
  // dropdowm样式修改
  .ivu-select-dropdown {
    background: #263047 !important;
    .ivu-dropdown-menu .ivu-dropdown-item:hover {
      background: #3651b9 !important;
    }
  }
  .location_div {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    color: @noti_text_color;
    font-size: 14px;
  }
  .card_left {
    width: 60px;
    .card_image {
      width: 48px;
      height: 48px;
      background: linear-gradient(140.63deg, #eb9595 4.67%, #ff3434 99.19%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      img {
        width: 30px;
      }
      .icon_png {
        width: 48px;
      }
    }
  }
  .card_right {
    flex: 1;
    position: relative;
    .from_div {
      padding-bottom: 8px;
      display: flex;
      font-size: 16px;
      position: relative;

      label {
        flex: 1;
        line-height: 23px;
        text-align: right;
        // width: 160px;
        color: @noti_gray_color;
      }
    }
    .card_tit {
      width: 400px;
      line-height: 23px;
      text-align: left;
      .card_ellipsis {
        text-overflow: ellipsis;
        display: block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
      }
    }
  }
  .notification_card_box {
    min-height: 90px;
    background: conic-gradient(
      from 258.19deg at 48.47% 52.54%,
      rgba(60, 91, 210, 0.6) 0deg,
      rgba(60, 91, 210, 0.3) 20deg,
      rgba(60, 91, 210, 0.3) 80deg,
      rgba(60, 91, 210, 0.6) 176.99deg,
      rgba(60, 91, 210, 0.3) 218.32deg,
      rgba(60, 91, 210, 0.3) 326.56deg,
      rgba(60, 91, 210, 0.6) 359.64deg,
      rgba(60, 91, 210, 0.3) 398.94deg
    );
    padding: 1px;
    padding-left: 0px;
    border-radius: 6px;
    position: relative;
    .notification_card_box_bg {
      border-left: 1px solid #3c5bd2;
      background: linear-gradient(0deg, #131e37, #131e37),
        conic-gradient(
          from 174.94deg at 65.83% 56.16%,
          #3c5bd2 0deg,
          rgba(60, 91, 210, 0.3) 28.19deg,
          rgba(60, 91, 210, 0.3) 175.21deg,
          #3c5bd2 198.67deg,
          rgba(60, 91, 210, 0.3) 241.13deg,
          rgba(60, 91, 210, 0.3) 344.83deg,
          #3c5bd2 360deg
        );
      height: 100%;
      width: 100%;
      border-radius: 6px;
      padding: 18px 24px;
      padding-left: 30px;
      position: relative;
    }
    .more_time {
      color: @noti_text_color;
      .more_time_icon {
        margin-right: 6px;
        vertical-align: middle;
        margin-bottom: 3px;
      }
    }
    .type_name {
      height: 24px;
      border: 2px solid #39415b;
      border-radius: 8px;
      padding: 0 16px;
      line-height: 22px;
      font-size: 14px;
      display: inline-block;
      margin-right: 12px;
      color: @noti_text_color;
    }
    .card_tag {
      background: #262f5a;
      border-radius: 4px;
      height: 22px;
      line-height: 22px;
      padding: 0 16px;
      display: inline-block;
      color: @noti_text_color;
      margin-bottom: 5px;
      font-size: 12px;
      margin-right: 10px;
    }
    .tag_title {
      position: relative;
      padding-right: 50px;
      color: rgba(242, 242, 242, 1);
      font-size: 14px;
      line-height: 23px;
      letter-spacing: 0em;
      text-align: left;
      strong {
        font-weight: bold;
        color: #2d8cf0;
      }
    }
    .tag_status {
      display: inline-block;
      margin-right: 12px;
      .tag_button {
        background: #483d41;
        box-shadow: 0px 4px 4px #431e1e,
          inset 0px 1px 1px rgba(148, 177, 220, 0.25),
          inset 0px -1px 1px #5d6fb8;
        border-radius: 4px;
        height: 22px;
        line-height: 20px;
        padding: 0 10px;
        i {
          width: 3px;
          height: 12px;
          margin: 0 1px;
          background: #ffe767;
          display: inline-block;
          vertical-align: middle;
        }
        &.color1 {
          i {
            background: #21cb65;
          }
        }
        &.color2 {
          i {
            background: #67c8ff;
          }
        }
        &.color3 {
          i {
            background: #ffe767;
          }
        }
        &.color4 {
          i {
            background: #ff8267;
          }
        }
        &.color5 {
          i {
            background: #ff3434;
          }
        }
      }
    }
    .notification_desc {
      font-size: 14px;
      line-height: 20px;
      text-align: justify;
      padding-bottom: 12px;
    }
    .task_location {
      color: @noti_text_color;
      // font-size: 16px;
      .location_icon {
        vertical-align: middle;
        margin-bottom: 3px;
      }
    }
    .notification_button {
      // padding-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .noti_btn {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 12px;
        border: 1px solid #b9c2ff;
        color: #b9c2ff;
        border-radius: 6px;
        margin-right: 12px;
        cursor: pointer;
        &.create_btn {
          border: 1px solid #6cffce;
          color: #6cffce;
        }
      }
      .left_div {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .more_icon {
      // position: absolute;
      // right: 0;
      // bottom: 0;
      cursor: pointer;
      color: @noti_text_color;
      display: inline-block;
      .ivu-icon {
        color: #838383;
      }
    }
  }
  .red_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2525;
    position: absolute;
    left: 12px;
    top: 26px;
  }
  .twoRow {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .notification_content_list {
    color: rgba(217, 217, 217, 1);
    font-size: 14px;
  }
  &.isRead {
    font-weight: normal;
    .red_dot {
      display: none;
    }
  }
}
.model_shadow_bg {
  height: 100%;
  overflow: auto;
  background: rgba(0, 12, 26, 0.6);
}
.new_msg_fixed {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  line-height: 30px;
  background: #3e4567;
  color: #b2d2fb;
  width: 100%;
  font-size: 15px;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.loader {
  width: 30px;
  height: 30px;
  position: relative;
  margin: 0 auto;
}
.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  to {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
// 2022-10-20-适配Ipad
@media screen and (max-width: 1600px) {
  .myProject {
    margin-bottom: 20px !important;
  }
  // .layout .leftLayoutList {
  //   width: 500px !important;
  //   left: 12px !important;
  //   top: 12px !important;
  //   .demoCard {
  //     padding-bottom: 12px !important;
  //     margin-bottom: 12px !important;
  //   }
  //   .cardBorder .welcome_text {
  //     padding-top: 16px !important;
  //     padding-bottom: 12px !important;
  //     .img_awaer {
  //       width: 35px !important;
  //     }
  //   }
  // }
  .demoListContain .demoCardX .demoImgX,
  .demoListContain .demoBgCard .demoImgX,
  .card_item_div .cardItem .topImage {
    height: 90px !important;
  }
  .demoListContain .demoCardX .demoBtn,
  .demoListContain .demoBgCard .demoBtn {
    padding-top: 0 !important;
  }
  .left_menu_div .sider_div .sider_menu {
    padding-left: 364px !important;
    .projectDeatil {
      width: 334px !important;
      padding: 20px !important;
      margin-right: 0px !important;
      left: 16px !important;
      // height: auto !important;
      .projectDeatil_top {
        margin-bottom: 4px !important;
        .more_btn {
          right: 0 !important;
        }
      }
      .projectDeatil_img {
        width: 294px !important;
      }
    }
  }
  .locationMap {
    width: 294px !important;
  }
  .cont_layout .layoutBox {
    .layout_right_box {
      width: 66px !important;
    }
    .layout_content {
      width: calc(100% - 66px) !important;
    }
  }
  .sider_div .sider_menu .projectContain {
    .outsideCard {
      padding: 0 8px !important;
      .projectItem {
        margin-bottom: 20px !important;
        padding-left: 4px !important;
      }
      .projectImg {
        margin-right: 5px !important;
        width: 70px !important;
      }
    }
    .appStore_overflow {
      padding-right: 4px !important;
      .outsideCard {
        padding-left: 10px !important;
      }
    }
  }
  .app_store_list .app_store_box {
    width: 255px !important;
    height: 108px !important;
    background-size: 255px 108px !important;
    margin-right: 16px !important;
    margin-bottom: 16px !important;
  }
  .app_store_li {
    .app_left {
      left: 12px !important;
      .app_icon {
        // margin-left: 6px !important;
      }
    }
    .app_right {
      padding-left: 75px !important;
    }
  }
  .project_dot_list {
    position: fixed !important;
    right: 110px !important;
  }
  .projectDeatil_address {
    margin-bottom: 16px !important;
  }
  .app_store_style {
    padding-left: 6px;
  }
  .ProjectNames {
    > span {
      float: left;
      height: 48px;
    }
  }
}

.split-screen-page {
  .ivu-drawer {
    height: calc(100% - 48px);
    top: 48px;
  }
  .ivu-drawer-body {
    padding: 0;
  }
  .ivu-drawer-content {
    background: #181a1dd9 !important;
  }
  &.l .ivu-drawer-content {
    //padding-right: 60px;
    left: 66px;
  }
  &.r .ivu-drawer-content {
    // padding-left: 60px;
    // right: 66px;
    width: calc(100% - 60px);
  }
}
// .ivu-tooltip-inner {
//   white-space: normal;
// }
